<template>
  <m-layout>
    <mt-header slot="header" title="客户列表" >
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body" class="customer-list">
      <mt-search @input='searchAction'
        v-model="name"
        cancel-text="取消"
        placeholder="搜索">
      </mt-search>
      <drop-down @changeStatus='changeStatus' />
      <div>
        <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore"
        v-if='dataList && dataList.length > 0'>
          <student-item v-for='(item, index) in dataList' :key='index' :item='item' />
        </mt-loadmore>
        <e-placeholder v-else />
      </div>
    </div>
    <div slot="bottom" >
      <router-link to='/sale/custom'>
        <mt-button type="primary"  size="large"  >添加</mt-button>
      </router-link>
    </div>
  </m-layout>
</template>

<script>
import saleApi from 'api/sale.js'
import { mapGetters } from 'vuex'
import DropDown from './components/DropDown'
import StudentItem from './components/StudentItem'

export default {
  components: {
    DropDown,
    StudentItem
  },
  computed: {
    ...mapGetters({
      studentList: 'sale/getSalespersonStudentList'
    })
  },
  data () {
    return {
      status: '',
      name: '',
      currentPage: 0, // 页面从1开始，1、2、3...
      dataList: [],
      allLoaded: false
    }
  },
  mounted () {
    this.studentId = this.$route.params.student_id
    this.getDataList('page1')
  },
  methods: {
    changeStatus (status) {
      this.status = status
      this.getDataList('page1')
    },
    searchAction () {
      this.getDataList('page1')
    },
    loadTop () {
      this.$refs.loadmore.onTopLoaded()
      this.currentPage = 0
      this.getDataList('page1')
    },
    loadBottom () {
      if (!this.allLoaded) {
        this.$refs.loadmore.onBottomLoaded()
        this.getDataList()
      }
    },
    getDataList (value) {
      this.currentPage += 1
      saleApi.getSalespersonStudentList({
        page: this.currentPage,
        status: this.status,
        name: this.name
      }).then((res) => {
        if (this.currentPage >= res.data.pages) {
          this.allLoaded = true
        } else {
          this.allLoaded = false
        }
        if (value === 'page1') {
          this.dataList = []
        }
        this.dataList.push(...(res.data.list))
      })
    }
  }
}
</script>

<style lang="scss">
.customer-list{
  // .mint-cell-wrapper{
  //   height:1.3rem;
  // }
}
</style>
